<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .part {
            padding: 15px 15px 0 15px;
        }

        .part .pf {
            border-radius: 6px;
            box-shadow: 0px 1px 5px rgb(200, 198, 198);
            background-color: #fff;
            overflow: hidden;
        }

        .textarea {
            display: block;
        }

        .label {
            padding: 10px 16px;
        }

        .ap-f {
            border-bottom: 1px solid #f7f7f7;
        }

        .mark {
            padding: 17px 15px;
        }

        .mark1 {
            padding: 17px 5px 17px 15px;
            position: relative;
        }

        .f-sub {
            color: #969799;
            font-size: 13px;
            margin-top: 4px;
        }

        .line {
            position: relative;
            width: 30px;
        }

        .line1 {
            width: 60px;
        }

        .line-sq {
            display: inline-block;
            width: 11px;
            height: 11px;
            border-radius: 6px;
            background: #d6d6d6;
            position: absolute;
            left: 0;
            top: 12px;
        }

        .line-li {
            display: inline-block;
            width: 1px;
            background: #d6d6d6;
            position: absolute;
            left: 5px;
            top: -17px;
            bottom: -17px;
        }

        .line-li1 {
            display: inline-block;
            background: #d6d6d6;
            position: absolute;
            top: 52px;
            left: 35px;
            width: 3px;
            bottom: 10px;
        }

        .pd {
            padding: 16px 0;
        }

        .ap-r {
            text-align: right;
            padding-right: 10px;
            /* margin: -8px 0; */
            padding-top: 10px;
        }

        .ap-d {
            text-align: right;
            padding-right: 10px;
            color: #ccccce;
            font-size: 13px;
            float: right;
            padding-top: 3px;
        }

        .img {
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            background-color: #3396fb;
            border-radius: 6px;
            margin: 0 auto;
            position: relative;
            user-select: none;
        }

        .img1 {
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 13px;
            color: #fff;
            background-color: #3396fb;
            border-radius: 6px;
            position: relative;
            user-select: none;
        }

        .dis-ib {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            min-width: 40px;
        }

        .dis2-ib {
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 3px;
            text-align: center;
        }

        .dis3-ib {
            display: inline-block;
            margin: 0 6px;
            color: #969799;
            vertical-align: top;
            padding-top: 7px;
            text-align: center;
        }

        .ap-n {
            padding-top: 2px;
            font-size: 13px;
            color: #969799;
            text-align: center;
        }

        .bottom {
            width: 100%;
            padding: 8px 15px;
            position: absolute;
            bottom: 0;
        }

        .part-white {
            padding: 15px;
            background-color: #fff;
            position: relative;
        }

        .title {
            line-height: 40px;
            font-size: 18px;
        }

        .title-sub {
            color: #aaacac;
            font-size: 13px;
        }

        .title-read {
            color: #3396fb;
            font-size: 13px;

        }

        .title-unread {
            color: #788a8a;
            font-size: 13px;
        }

        .ap-res {
            color: #a3a3a3;
            font-size: 15px;
            padding-top: 6px;
        }

        .ap-res1 {
            color: #c31616;
            font-size: 15px;
            padding-top: 6px;
        }

        .ap-img {
            position: absolute;
            right: 20px;
            bottom: -38px;
            width: 88px;
            opacity: 0.4;
        }

        .form-row {
            padding: 4px 16px;
        }

        .form-label {
            color: #808991;
            font-size: 13px;
            user-select: none;
        }

        .form-content {
            padding-top: 5px;
        }

        .npd {
            padding-top: 0;
            overflow-x: auto;
        }

        .pl {
            color: #969799;
            font-size: 16px;
            margin: 6px 2px 18px 0;
            min-height: 25px;
            border-bottom: 1px solid #ebedf0;
        }

        .sf {
            width: 16px;
            background: #fff;
            padding: 2px;
            border-radius: 8px;
            position: absolute;
            right: -5px;
            bottom: -2px;
        }

        .select {
            color: #3396fb;
            float: right;
            font-size: 13px;
            padding-top: 3px;
            vertical-align: middle;
        }

        .select a {
            vertical-align: middle;
        }

        .select img {
            width: 16px;
            vertical-align: middle;
        }

        .hq {
            padding: 10px 10px 0 0;
        }

        .wh {

            white-space: nowrap;
            overflow-x: auto;
            padding-right: 10px;
        }

        .plpd {
            padding-bottom: 5px;
        }

        .pictitle {
            line-height: 24px;
            color: #646566;
            user-select: none;
        }

        .piccontent {
            padding-top: 10px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-right: 15px;
        }

        .no {
            text-align: center;
            color: #808991;
            font-size: 14px;
        }

        .li1 {
            top: 15px;
        }

        .li2 {
            bottom: 24px;
        }

        .da-c {
            color: #c31616;
        }

        .danger .van-field__control {
            color: #c31616;
        }

        .danger .van-field__label {
            color: #808991;
        }

        .ac-1 {
            color: #03b553;
        }

        .ac-2 {
            color: #c31616;
        }

        .checkbox {
            padding: 25px 5px 10px 10px;
        }

        .jl-remark {
            padding: 5px 0;
            color: #3396fb;
        }

        .memo-l {
            border-bottom: 1px solid rgb(235, 237, 240);
            padding: 4px 0;
        }

        .memo-l:last-child {
            border-bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="额外取样评审" left-arrow @click-left="onClickLeft"></van-nav-bar-main>
            <div class="content" style="padding-bottom: 20px;">
                <div>
                    <div class="part">
                        <div class="pf">
                            <van-field v-model="form.batch" label="批次号" placeholder="请输入批次号"></van-field>
                            <van-field v-model="form.Qty" label="取样数量" placeholder="请选输入样数量"></van-field>
                            <van-field v-model="form.productName" label="产品名称" placeholder="请选择产品" readonly
                                right-icon="arrow" @click="openBaseScreen('产品')"></van-field>
                            <van-field v-model="form.date" label="操作日期" placeholder="请选择操作日期" readonly
                                right-icon="arrow" @click="showDate = true"></van-field>
                            <van-field v-model="form.reason" label="异常原因" placeholder="请输入异常原因"></van-field>
                            <van-field v-model="form.type" label="类型" placeholder="请选择类型" readonly right-icon="arrow"
                                @click="handlerType"></van-field>
                            <van-field v-model="form.items" label="实验项目" placeholder="请选择实验项目" readonly
                                right-icon="arrow" @click="showItems = true"></van-field>
                            <van-field v-show="showItems1" v-model="form.items1" placeholder="请输入具体实验项目"></van-field>
                        </div>
                    </div>
                    <div class="part">
                        <div class="pf">
                            <van-field required v-model="form.personname" label="申请人" placeholder="请选择申请人" readonly>
                            </van-field>
                            <van-field v-model="form.persondepartname" label="申请部门" placeholder="请选择部门" readonly>
                            </van-field>
                        </div>
                    </div>

                </div>
                <div class="bottom">
                    <div class="flex-main">
                        <van-row gutter="30">
                            <van-col :span="24">
                                <van-button block :square="false" :disabled="ifConfirm" :loading="ifConfirm"
                                    @click="savePage()">确认提交评审</van-button>
                            </van-col>
                        </van-row>
                    </div>
                </div>

                <van-popup v-model="showDate" position="bottom">
                    <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="confirmDate"
                        @cancel="showDate = false"></van-datetime-picker>
                </van-popup>

                <van-action-sheet v-model="showType" :actions="typeActions" @select="typeSelect"></van-action-sheet>
                <van-action-sheet v-model="showItems" :actions="itemsActions" @select="itemsSelect"></van-action-sheet>
            </div>
        </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            // console.log('ret', JSON.stringify(ret))
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '产品') {
                vm.form.productName = row[0].name;
                vm.form.productCode = row[0].ProductID;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                ifConfirm: false,
                form: {
                    PlanID: '',
                    batch: '',
                    Qty: '',
                    productName: '',
                    productCode: '',
                    date: '',
                    reason: '',
                    type: '',
                    items: '',
                    items1: '',
                    personname: APP.getUserInfo().UserName,
                    personid: APP.getUserInfo().UserID,
                    persondepartname: APP.getUserInfo().ClassName,
                    persondepartid: APP.getUserInfo().ClassID,
                },
                showDate: false,
                currentDate: new Date(),
                showType: false,
                showItems: false,
                typeActions: [],
                itemsActions: [
                    {
                        name: '日常实验'
                    },
                    {
                        name: 'PV实验'
                    },
                    {
                        name: '失效验证实验'
                    },
                ],
                showItems1: false
            },
            created: function () {
                var that = this;
                that.form.date = that.getFormatDate(new Date())
            },
            methods: {
                getFormatDate(date) {
                    if (!date) date = new Date();
                    var seperator1 = "-";
                    var seperator2 = ":";
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    return currentdate;
                },
                confirmDate() {
                    var that = this
                    that.form.data = that.getFormatDate(that.currentDate)
                    that.showDate = false
                },
                handlerType() {
                    var that = this
                    APP.ajax('app_getdepartment', {}, function (res) {
                        that.typeActions = res.ds
                        that.showType = true
                    })
                },
                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    if (str == '产品') {
                        obj = {
                            allowClear: false,
                            cmd: 'DropDownProduct',
                            type: str,
                            localSearch: {
                                showText: 'name',		//查询结果显示的字段
                                searchBy: ['name']		//按那些字段进行搜索
                            },
                            param: {
                            }

                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'tool/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: obj
                    })
                },
                onClickLeft() {
                    api.closeWin();
                },
                savePage() {
                    var that = this
                    var obj = {
                        Batch: that.form.batch,
                        Type: that.form.type,
                        Items: that.form.items,
                        YCReason: that.form.reason,
                        Qty: that.form.Qty,
                        OperateDate: that.form.date,
                        PlanID: that.form.PlanID,
                        Items1: that.form.items1,
                        Creater: that.form.personid,
                        ProductID: that.form.productCode
                    }
                    APP.ajax('updateExtraQYList_1', obj, function (res) {
                        // console.log('updateExtraQYList_1', JSON.stringify(res))
                        api.sendEvent({
                            name: 'refreshList'
                        });
                        layer.open({
                            content: '保存成功',
                            skin: 'msg',
                            time: 2
                        });

                        var approveObj = {
                            TableName: 'CK_ExperimentPlan',
                            ApprovalID: 14116,
                            Ck_ReviewID: res.ds[0].PlanID,
                            approveType: 0,
                            Explain: '默认同意'
                        }
                        APP.ajax('bgApprove_qy', approveObj, function (res) {
                            if (res.ds.length && res.ds[0].status && res.ds[0].status == 500) {
                                layer.open({
                                    content: res.ds[0].msg,
                                    skin: 'msg',
                                    time: 2
                                });
                            } else {
                                layer.open({
                                    content: '审批提交成功',
                                    skin: 'msg',
                                    time: 2
                                });
                                api.closeWin();

                            }
                            // console.log('bgApprove_qy', JSON.stringify(res))
                        })
                    })
                },
                typeSelect(val) {
                    var that = this
                    that.form.type = val.name
                    that.showType = false
                },
                itemsSelect(val) {
                    var that = this
                    that.form.items = val.name
                    if (val.name == '失效验证实验') {
                        that.showItems1 = true
                    }
                    that.showItems = false
                }
            }
        })
    };
</script>

</html>